<template>
  <div class="buy-good">
    <el-card>
      <div slot="header" class="clearfix">
        <span>确认订单信息</span>
        <el-table :data="goodInfo" style="width: 100%">
          <el-table-column label="宝贝">
            <template slot-scope="scope">
              <div class="baobei">
                <img class="small-img" :src="scope.row.bigImages" alt />
                <div>{{scope.row.name}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="speName" label="商品属性"></el-table-column>
          <el-table-column prop="price" label="单价"></el-table-column>
          <el-table-column label="数量">
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.num"
                @change="handleChange"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="小计">
            <template slot-scope="scope">{{scope.row.num * scope.row.price}}</template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodInfo: []
    };
  },
  computed: {
    goodId() {
      return this.$route.query.projectId;
    },
    goodsProId() {
      return this.$route.query.goodsProId;
    },
    num() {
      return this.$route.query.num
    }
  },
  methods: {
    handleChange(num) {
      var total = 0;
      this.goodInfo.forEach(({num, price}) => {
        total += num * price;
      })
      this.$bus.emit('buy-info-price-change', total);
    }
  },
  async activated() {
    var { data } = await this.$http.get("/index.php/getGoodsDetail", {
      params: {
        gid: this.goodId
      }
    });
    data.goodsInfo.forEach(item => {
      item.num = this.num;
    });;
    this.goodInfo = data.goodsInfo.filter(item => {
      return item.goodsProId == this.goodsProId;
    });
    // TODO 这里要传过来
    this.$bus.emit('buy-info-price-change', this.num * this.goodInfo[0].price);
  }
};
</script>

<style lang="less" scoped>
  .buy-good {
    margin-top: 40px;
  }
  .baobei {
    display: flex;
    align-items: center;
    .small-img {
      height: 50px;
      width: 50px;
      display: flex;
    }
  }
  .box-card {
    width: 400px;
  }
</style>
<style lang="less">
  .buy-good {
    .cell {
      text-align: center;
    }
  }
</style>